<template>
    <div>

      
       <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 1" :key="item">
    
      <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/launch/20220428/phones/xs2-nav.png" alt="mate系列" class="img1" >
      <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones/nav/p-series.png" class="img2" alt="P系列" @click="goAnchor2('2')" href="javascript:void(1)">
      <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones/nav/nova-series.png" class="img3">
      <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones/nav/changxiang.png" class="img4">
      <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones/nav/compare.png" class="img5">
      <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones/nav/accessories.png" class="img6">
      <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/cn/mkt/plp/phones/nav/meetime.png" class="img7">
      <div class="wz">
      <h2 class="wz1" @click="goAnchor('1')">mate系列</h2> 
      <h2 class="wz2" @click="goAnchor('2')"> P系列</h2>
      <h2 class="wz3" @click="goAnchor('3')"> nova系列</h2>
      <h2 class="wz4" @click="goAnchor('4')"> 畅享系列</h2>
      <h2 class="wz5"> 手机对比</h2>
      <h2 class="wz6"> 配件</h2>
      <h2 class="wz7"> 畅联</h2>
      
     
</div>
    </el-carousel-item>
  </el-carousel>

  <el-row id="1">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>旗舰性能，引领时代</p>
      </div>
      <div class="part2 bg_safe">
        <p>Mate系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="bt"> <h2>最新</h2></div>
    <div class="bt1"><p>HUAWEI Mate Xs 2</p></div>
    <div class="bt2"><h2>超轻薄超平整超可靠 | 超清原色大屏 | 原色影像系统</h2></div>
    <div class="bt3"><p>￥9999 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round @click="gm">立即购买</el-button></div>
    <img src="../../assets/shouji.png" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row>
  <el-col :span="24">
    <div class="btt"> <h2>最热</h2></div>
    <div class="btt1"><p>HUAWEI Mate X2</p></div>
    <div class="btt2"><h2>重心偏移设计，锋锐纤薄机身 | 8:7.1 折叠屏黄金显示比例，沉浸纯粹 | 麒麟 9000 芯片，震撼体验</h2></div>
    <div class="btt3"><p>￥17799 起</p></div>
    <div class="btt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
     <img src="../../assets/matex2.jpg" class="btt5"> 
    <img src="../../assets/beijin.jpg" class="z">  
    
  </el-col>
</el-row>


  <el-row id="2">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>颜值出众，摄影服众</p>
      </div>
      <div class="part2 bg_safe">
        <p>P 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="bt"> <h2>最热</h2></div>
    <div class="bt1"><p>HUAWEI P50 Pocket</p></div>
    <div class="bt2"><h2>精巧折叠 | 超光谱影像系统 | 智慧外屏，6.9” 可折叠柔性内屏</h2></div>
    <div class="bt3"><p>￥8988 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/p50.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row>
  <el-col :span="24">
    <div class="btt"> <h2>最热</h2></div>
    <div class="btt1"><p>HUAWEI P50 Pro</p></div>
    <div class="btt2"><h2>原色影像，超级变焦，AIS Pro 超级防抖 | 120 Hz 屏幕刷新率，有线无线双超级快充 | HarmonyOS 2（基于鸿蒙操作系统）</h2></div>
    <div class="btt3"><p>￥5488 起</p></div>
    <div class="btt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
     <img src="../../assets/p50pro.jpg" class="btt5"> 
    <img src="../../assets/beijin.jpg" class="z">  
    
  </el-col>
</el-row>

 <el-row id="3">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>精彩，由我摄定</p>
      </div>
      <div class="part2 bg_safe">
        <p>nova 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="bt"> <h2>最热</h2></div>
    <div class="bt1"><p>HUAWEI nova 9</p></div>
    <div class="bt2"><h2>3200 万前置 Vlog 镜头 | 66 W 超级快充，10 亿色臻彩屏 | HarmonyOS 2 智慧生活新体验</h2></div>
    <div class="bt3"><p>￥2599 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/nova9.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>


 <el-row id="4">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>畅快，由此开启</p>
      </div>
      <div class="part2 bg_safe">
        <p>畅享系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="bt1"><p>华为畅享 20e</p></div>
    <div class="bt2"><h2>5000 mAh 大电池 | 6.3 英寸高清大屏 | 128 GB 大内存</h2></div>
    <div class="bt3"><p>￥999 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/20e.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>


    </div>
</template>

<script>
export default {
  
    setup () {
        

        return {
        
        }
         
        
    },
    methods: {
      goAnchor(id) {
      var anchor = document.getElementById(id);
      anchor.scrollIntoView();
    },
    liaojie(){
      this.$router.push({name:'liaojie'})
    },
    gm(){
       this.$message('购买成功，即刻配送 ' )
    }
        },
        
        
}
</script>

<style lang="scss" scoped>
.img1{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;       
  cursor: pointer;
}
.img2{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
          cursor: pointer;
}
.img3{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img4{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img5{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img6{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img7{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 79%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.wz{
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
}
.wz1{
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
      cursor: pointer;
}
.wz2{
  left: 95px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
      cursor: pointer;

}
.wz3{
  left: 200px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.wz4{
  left: 290px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.wz5{
  left: 380px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.wz6{
  left: 490px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.wz7{
  left: 595px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.part{
  text-align: center;
  padding-top: 50px;
  font-size: 80px;
  font-weight: bolder;
}.part2{
  text-align: center;
  padding-top: 20px;
   font-size: 30px;
   
}
.bg_safe {
    background: #F3F7FB;
}
.z{
     width:1490px;
    height: 600px;
    padding-top: 10px;
    box-sizing: border-box;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
      position: relative;
}
.bt{
 
   left: 150px;
    position: absolute;
   padding-top: 180px;
   z-index: 1;
   color: rgb(205, 8, 8);
}
.btt{
 
   right: 150px;
    position: absolute;
   padding-top: 180px;
   z-index: 1;
   color: rgb(205, 8, 8);
}
.bt1{
    left: 150px;
    position: absolute;
    z-index: 1;
     padding-top: 225px;
     font-size: 50px;
     font-weight: bolder;
}
.btt1{
    right: 150px;
    position: absolute;
    z-index: 1;
     padding-top: 225px;
     font-size: 50px;
     font-weight: bolder;
}
.bt2{
   left: 150px;
    position: absolute;
     padding-top: 350px;
      z-index: 1;
      font-size: 10px;
}
.btt2{
   right: 150px;
    position: absolute;
     padding-top: 350px;
      z-index: 1;
      font-size: 10px;
}
.bt3{
left: 150px;
    position: absolute;
    z-index: 1;
    padding-top: 380px;
}
.btt3{
right: 150px;
    position: absolute;
    z-index: 1;
    padding-top: 380px;
}
.bt4{
  left: 140px;
    position: absolute;
    z-index: 1;
    padding-top: 430px;
    .lj{
      background: #000;
      color: #F3F7FB;
    }
}
.btt4{
  right: 140px;
    position: absolute;
    z-index: 1;
    padding-top: 430px;
    .lj{
      background: #000;
      color: #F3F7FB;
    }
}
.bt5{
 width: 745px;
  height: 575px;
   left: 725px;
    position: absolute;
    z-index: 1;
    padding-top: 17px;
}
.btt5{
 width: 745px;
  height: 575px;
   right: 725px;
    position: absolute;
    z-index: 1;
    padding-top: 17px;
}
</style>